<template>
    <div class="wrap">
        <div class="wrap-head">
            <div class="logo"></div>
            <div class="tel-wrap"><div class="tel-icon"></div>0755-83589500</div>
            <div class="menu-item">
                <div class="menu-list animated bounceIn" :class="{ active: item.path== activePath}" v-for="(item,index) in menuList" :key="index">
                    <div class="menu-name">{{item.name}}</div>
                </div>
            </div>
        </div>
        <div class="wrap-home">
            <img src="../images/bg1.png" alt="">
            <img class="bg-tltle animated fadeInLeft" src="../images/bg-title.png" alt="">
            <div class="home-color"></div>
        </div>
        <div class="wrap-bg1">
            <div class="title">摄像头模组外观检测方案</div>
            <div class="wrap-text">
                <p>摄像头模组外观检测方案纳研摄像头模组外观检测系统基于手机液晶屏工业生产的特殊性，用纳研NANO-LOI-1000设备采用高度</p>
                <p>集成的光学成像系统、新型的气浮传动装置和模块化的整机系统结构，能够检测不同世代的显示屏点灯缺陷（如亮点、漏光、白点、</p>
                <p>斑纹、mura、黑点、颜色不均等），并支持在线和离线的自动光学检测。</p>
            </div>
            <div class="wrap-btn">了解更多</div>
        </div>
        <div class="wrap-bg2">
            <div class="title">皮革/布匹质量检测方案</div>
            <div class="wrap-text">
                <p>皮革材质多样，缺陷种类繁多，主要有：Micro Wrinkle、表面亮斑、表面线条、花纹深浅、表面划伤、局部无花纹、漆膜脱落、气</p>
                <p>泡等多种人眼难以观察到的缺陷，故需要一种高精度与可靠性的视觉检测方案来实现更精准的检测。</p>
            </div>
            <div class="wrap-btn">了解更多</div>
        </div>
        <div class="wrap-bg3">
            <div class="goods-item">
                <div @mouseenter="enter(index)" v-for="(item,index) in arrList" :key="index" class="good-list animated" :class="{bounce : index == activeIndex}">
                    <p>{{item.title}}</p>
                    <p>{{item.name}}</p>
                    <p v-if="item.name1">{{item.name1}}</p>
                </div>
            </div>
        </div>
        <div class="wrap-bg2">
            <div class="bg2-title">纳研“新”视角</div>
            <video width="57.4%" height="630px" controls="controls">
                <source src="http://jq22.qiniudn.com/www.jq22.commi4.webm" type="video/ogg">
                <source src="http://jq22.qiniudn.com/www.jq22.commi4.webm" type="video/mp4">
                Your browser does not support the video tag.
            </video>
        </div>
        <div class="wrap-footer">
            <div class="footer-left">
                <div class="tel-phone"><img src="../images/tel.png" alt=""> 0755-83589500</div>
                <div class="concat-item">
                    <div class="concat-list">合作邮箱：sales@nanovision.cn</div>
                    <div class="concat-list">人才引进邮箱：hr@nanovision.cn</div>
                    <div class="concat-list">版权所有：深圳市纳研科技有限公司</div>
                </div>
            </div>
            <div class="footer-middle">
                <p>专注于机器视觉技术研究与产品开发</p>
                <p>面向高端的机器视觉设备开发商和系统集成商</p>
            </div>
            <div class="footer-wechat">
                <img src="../images/code.png" alt="">
                <p>官方公众号</p>
            </div>
        </div>
    </div>
</template> 

<script>
import "./animate.css";
export default {
    data() {
        return {
            menuList:[
                {
                    path:'/',
                    name:'首页'
                },
                {
                    path:'/1',
                    name:'合作案例'
                },
                {
                    path:'/2',
                    name:'产品中心'
                },
                {
                    path:'/3',
                    name:'行业状态'
                },
                {
                    path:'/4',
                    name:'关于我们'
                },
            ],
            arrList:[{
                title:'苹果充电插头检测项目',
                name:'(检测软件开发)'
            },{
                title:'手机回收设备',
                name:'(检测软件开发)'
            },{
                title:'手机充电外壳检测设备',
                name:'(检测解决方案)'
            },{
                title:'苹果Mac电脑触屏',
                name:'板质量检测设备',
                name1:'(检测解决方案)'
            },{
                title:'苹果手机装配生产',
                name:'线螺丝钉检测设备',
                name1:'(检测软件开发)'
            },{
                title:'德国汽车内装皮革',
                name:'产线检测设备开发',
                name1:'(整机开发)'
            }],
            activeIndex:'',
            activePath:''
        }
    },
    mounted(){
        this.activePath = this.$router.currentRoute.path;
        console.log(this.activePath)
    },
    methods: {
        enter(num){
            this.activeIndex = num;
        }
    }
}
</script>
<style lang="scss" scoped>
    .wrap-head{
        position: absolute;
        left: 0;    
        right: 0;
        top: 0;
        padding-top: 24px;
        .logo{
            float: left;
            background: url(../images/logo.png) 100%;
            width: 251px;
            height: 94px;
            margin-left: 10%;
        }
        .menu-item{
            float: right;
            overflow: hidden;
            .menu-list{
                background: url(../images/menu-item.png) 100%;
                width: 101px;
                height: 102px;
                cursor: pointer;
                color: #fff;
                font-size: 14px;
                float: left;
                &.active{
                    background: url(../images/menu-item1.png) 100%;
                }
                .menu-name{
                    padding-top: 27px;
                    text-align: center;
                }
            }
        }
        .tel-wrap{
            padding-top: 25px;
            float: right;
            overflow: hidden;
            height: 24px;
            line-height: 24px;
            margin-right: 4.5%;
            margin-left: 4%;
            .tel-icon{
                background: url(../images/telephone.png) 100%;
                width: 25px;
                height: 24px;
                float: left;
                font-size: 25px;
                font-weight: bold;
                color: #565656;
                margin-right: 7px;
            }
        }
    }

    .wrap-home{
        // position: relative;
        img{
            width: 100%;
        }
        img.bg-tltle{
            position: absolute;
            width: 784px;
            height: 195px;
            left: 8%;
            top: 320px;
        }
        .home-color{
            position: relative;
            top: -4px;
            height: 66px;
            background-color: #B9182E;
        }
    }

    .wrap-bg1{
        position: relative;
        top: -4px;
        background-image: url(../images/bg2.png);
        // background-size: cover;
        background-size: 100% 100%;
        width: 100%;
        height: 872px;
        text-align: center;
        .title{
            padding-top: 198px;
            padding-bottom: 117px;
            font-size: 40px;
            color: #333;
        }
        .wrap-text{
            p{
                font-size: 24px;
                color: #333;
            }
        }
        .wrap-btn{
            cursor: pointer;
            width: 200px;
            height: 53px;
            line-height:53px;
            text-align: center;
            color: #333;
            font-size: 23px;
            border: 1px solid #333;
            margin: 119px auto 0;
            &:hover{
                color:#b9182e;
                border-color: #b9182e;

            }
        }
    }
    .wrap-bg2{
        position: relative;
        top: -4px;
        background-image: url(../images/bg3.png);
        // background-size: cover;
        background-size: 100% 100%;
        width: 100%;
        height: 872px;
        text-align: center;
        .title{
            padding-top: 198px;
            padding-bottom: 117px;
            font-size: 40px;
            color: #333;
        }
        .wrap-text{
            p{
                font-size: 24px;
                color: #333;
            }
        }
        .wrap-btn{
            width: 200px;
            height: 53px;
            line-height:53px;
            text-align: center;
            color: #333;
            font-size: 23px;
            border: 1px solid #333;
            margin: 119px auto 0;
            cursor: pointer;
            &:hover{
                color:#b9182e;
                border-color: #b9182e;

            }
        }

        .bg2-title{
            padding-top: 68px;
            margin-bottom: 48px;
            font-size: 24px;
            color: #333;
        }
    }
    .wrap-bg3{
        position: relative;
        top: -4px;
        background-image: url(../images/bg4.png);
        // background-size: cover;
        background-size: 100% 100%;
        width: 100%;
        height: 872px;
        text-align: center;
        .goods-item{
            overflow: hidden;
            padding-left: 12.9%;
            padding-right: 12.55%;
            padding-top: 74px;
            &:nth-child(1){
                padding-top: 131px;
                .good-list{
                 padding-top: 70px;
                }
            }
            .good-list{
                cursor: pointer;
                padding-top: 45px;
                background-image: url(../images/circle.png);
                background-repeat: no-repeat;
                background-size: 100%;
                width: 20%;
                height: 255px;
                float: left;
                font-size:18px;
                color: #fff;
                font-weight: bold;
                margin-left: 10%;
            }
        }
    }
    .wrap-footer{
        background-image: url(../images/bottom.png);
        background-size: 100% 100%;
        width: 100%;
        height: 305px;
        background-repeat: no-repeat;
        .footer-left{
            float: left;
            margin-left: 14%;
            margin-top: 59px;
            .tel-phone{
                font-size: 30px;
                color: #333;
            }
            .concat-item{
                line-height: 28px;
                .concat-list{
                    font-size: 16px;
                    color: #333;
                    text-align: left;
                }
            }
        }
        .footer-middle{
            float: left;
            font-size: 30px;
            color: #333;
            margin-left: 6.82%;
            margin-top: 81px;
            line-height: 39px;
            p{
               margin: 0px;
            }
        }
        .footer-wechat{
            float: right;
            margin-right: 16.3%;
            margin-top: 57px;
            img{
                width: 125px;
                height: 125px;
            }
            p{
                font-size: 16px;
                color: #333;
                margin:0px;
            }
        }
    }
</style>
